<script setup lang="ts">
import { api } from '@/api/api';
import { message } from 'ant-design-vue';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const username = ref(route?.params?.username || '');
const schoolName = ref('');
const nickname = ref('');
const email = ref('');
const agreed = ref(false);

const handleSubmit = async () => {
  if (!agreed.value) {
    message.error('请同意服务条款和隐私声明');
    return;
  }

  const formData: any = {
    username: username.value,
    schoolName: schoolName.value,
    nickname: nickname.value,
  }

  if (email.value)
    formData.email = email.value

  try {
    await api.post('/java/user/personal_register', formData)
    message.success('注册成功！');
    router.push('/registration-success');
  }
  catch (error) {
    message.error('请求失败，请稍后再试。');
  }
}

const handlePrivacy = () => {
  window.open('/privacy', '_blank')
}

const handleOffical = () => {
  window.open('/offical', '_blank')
}
</script>

<template>
  <div class="registrationPage">
    <div class="leftSection">
      <img src="@/assets/678.png" alt="智链iLink" class="logo">
      <h1 style="color:white;margin-left:-15.625rem;">
        智链iLink
      </h1>
      <h1 class="tagline">
        <span class="highlight">大学生创新创业</span>的卓越助力
      </h1>
      <img src="@/assets/798.png" alt="介绍" class="showcaseImage">
    </div>
    <div class="rightSection">
      <div class="stepsImage">
        <img src="@/assets/yhtx_zc_step.png" alt="步骤">
      </div>
      <div class="formContainer">
        <form class="registerForm" @submit.prevent="handleSubmit">
          <h2 class="formTitle">
            填写信息
          </h2>
          <p class="text1">
            开启智链创新实践之旅
          </p>
          <input
            v-model="schoolName"
            type="text"
            placeholder="请输入您的学校名称"
            required
          >
          <input
            v-model="nickname"
            type="text"
            placeholder="希望怎么称呼您"
            required
          >
          <input
            v-model="email"
            style="width: 20.9375rem;"
            type="email"
            placeholder="请输入您的邮箱 (可选)"
          >
          <div class="agreement">
            <input v-model="agreed" type="checkbox" required>
            <span>
              我已阅读并同意 <a @click="handleOffical">《智链iLink服务条款》</a> 和 <a @click="handlePrivacy">《隐私声明》</a>
            </span>
          </div>
          <button type="submit">
            下一步
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<style scoped>
.registrationPage {
    display: flex;
    height: 100vh;
    background-color: #6295ff;
    flex-direction: row; /* 默认情况下是左右布局 */
}

.leftSection {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background-color: #6295ff;
    max-height: 1000px;
    min-width: 600px; /* 设置最小宽度 */
    max-width: 600px; /* 设置最大宽度为容器的一半 */
}

.logo {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    height: 4rem;
}

.tagline {
    font-size: 2.5rem;
    color: #ffffff;
    margin-bottom: 1rem;
    margin-right: -11.125rem;
    margin-top: 9.1rem;
    font-weight: 400;
    text-align: center;
}

.highlight {
    color: #75f0a1;
}

.showcaseImage {
    width: 100%;
    max-width: 28.125rem;
    margin-right: -11.125rem;
}

.rightSection {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background-color: #6295ff;
    min-width: 1500px; /* 设置最小宽度 */
    max-width: 1500px; /* 设置最大宽度为容器的一半 */
    max-height: 1000px;
}

.stepsImage {
    width: 80%;
    max-width: 31.25rem;
    margin-bottom: 1rem;
    margin-top: -3rem;
    margin-left: -15.5rem;
}

.stepsImage img {
    width: 100%;
}

.formContainer {
    width: 80%;
    max-width: 25rem;
    background-color: #fff;
    padding: 2rem;
    box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1);
    border-radius: 1.1rem;
    margin-left: -15.5rem;
    height: auto; /* 调整高度以适应内容 */
}

.registerForm {
    width: 100%;
    text-align: center;
}

.formTitle {
    margin-top: 0.625rem;
    font-size: 1.875rem;
    color: #000000;
    text-align: center;
    font-weight: 530;
    margin-bottom: 2%;
}

.text1 {
    margin-top: 0;
    font-size: 1.25rem;
    color: #000000;
    text-align: center;
    margin-bottom: 7%;
}

.registerForm input {
    width: 90%;
    padding: 0.8rem;
    margin-bottom: 1.2rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    font-size: 1rem;
}

.agreement {
    display: flex;
    align-items: center;
    margin-bottom: 0.6rem;
    font-size: 0.875rem;
    color: #666;
    justify-content: flex-start;
}

.agreement input {
    margin-left: -0.3125rem;
    margin-right: 0;
}

.agreement a {
    color: #007bff;
    text-decoration: none;
}

.agreement span {
    white-space: nowrap;
    margin-top: -1.1rem;
}

.agreement a:hover {
    text-decoration: underline;
}

.registerForm button {
    width: 100%;
    padding: 0.75rem;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.registerForm button:hover {
    background-color: #0056b3;
}

/* 媒体查询 */
@media (max-width: 768px) {
    .registrationPage {
        flex-direction: column; /* 屏幕宽度小于768px时，改为上下布局 */
    }

    .leftSection, .rightSection {
        max-width: 100%; /* 左右部分宽度设置为100% */
        min-width: 100%; /* 最小宽度设置为100% */
    }

    .showcaseImage {
        margin-right: 0; /* 小屏幕上移除右侧的负边距 */
    }

    .tagline {
        font-size: 1.5rem; /* 减小字体大小以适应小屏幕 */
        margin-right: 0;
    }

    .stepsImage {
        margin-left: 0; /* 小屏幕上移除左侧的负边距 */
    }

    .formContainer {
        margin-left: 0; /* 小屏幕上移除左侧的负边距 */
    }
}
</style>
